<template>
  <div id="add">
    <!-- 头部 -->
    <div class="navebar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备编号">
          <el-input
            v-model="formInline.taskCode"
            placeholder="请输入"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">
            查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格新建按钮 -->
    <div class="boxs">
      <div class="btn">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="btn1"
          @click="addClick"
        >新建</el-button>
        <el-button
          type="warning"
          plain
          class="btn2"
          @click="bulkFn"
        >批量操作</el-button>
      </div>

      <!-- 表格 -->
      <div class="tabel">
        <el-table
          v-loading="loading"
          tooltip-effect="dark"
          :data="SearchList"
          style="width: 100%"
          :header-cell-style="{
            //标题头部的颜色
            background: '#f5f7fa',
            height: '45px',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column fixed type="index" label="序号" width="100" />
          <el-table-column prop="innerCode" label="设备编号" width="170" />
          <el-table-column prop="type.name" label="设备型号" width="180" />
          <el-table-column prop="node.name" label="详细地址" width="180" />
          <el-table-column prop="ownerName" label="合作商" width="160" />
          <el-table-column prop="remark" label="设备状态" width="160">
            <template #default="scope">
              {{ vm[scope.row.vmStatus]||'未知' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium "
                @click="cargo(scope.row)"
              >货道</el-button>
              <el-button
                type="text"
                size="medium"
                @click="tactics(scope.row)"
              >策略</el-button>
              <el-button
                type="text"
                size="medium"
                @click="altertac(scope.row)"
              >修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 实现分页
        current-page 当前页数
        page-size 每页显示个数
        total 总条目数
        current-change 页面改变时会触发
        prev-text="上一页"
        next-text="下一页"
         -->
        <div class="block">
          <el-pagination
            background
            :current-page.sync="pageOption.pageIndex"
            :page-size="pageOption.pagesize"
            layout="total,  pager, prev, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 新建弹出框 -->
    <div class="dil">
      <el-dialog
        title="新增设备"
        :visible.sync="centerDialogVisible"
        width="50%"
        :before-close="closeFn"
      >
        <!-- 表单内容 -->
        <el-form
          ref="departRef"
          :model="departForm"
          :rules="departRules"
          label-width="120px"
        >
          <el-form-item label="设备编号:">
            <span> 系统自动生成</span>
          </el-form-item>
          <el-form-item label="选择型号:" prop="vmType">
            <el-select
              v-model="departForm.vmType"
              style="width: 85%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in mobel"
                :key="item.id"
                :label="item.name"
                :value="item.typeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择点位:" prop="nodeId">
            <el-select
              v-model="departForm.nodeId"
              style="width: 85%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in pointt"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button class="btnquxiao" @click="closeFn">取 消</el-button>
          <el-button
            type="primary"
            class="btn1"
            @click="submitWork(departForm)"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 批量策略管理弹窗未完成 -->

    <!-- 货道弹出框 -->
    <Carousel :visible="carouselVisible" />

    <!-- 策略管理-添加策略 -->
    <div class="dil">
      <el-dialog
        :title="title"
        :visible.sync="tacticsVisible"
        width="50%"
        :before-close="closeFn"
      >
        <!-- 表单内容 -->
        <el-form
          ref="departRef"
          :model="departForm"
          :rules="departRules"
          label-width="120px"
        >
          <el-form-item label="选择策略:" prop="policyId">
            <el-select
              v-model="type.policyId"
              style="width: 85%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in tactic"
                :key="item.id"
                :label="item.policyName"
                :value="item.policyId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button class="btnquxiao" @click="closeFn">取 消</el-button>
          <el-button
            type="primary"
            class="btn1"
            @click="tacticSubmit"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 策略管理-取消策略 -->
    <div class="dils">
      <el-dialog
        title="策略管理"
        :visible.sync="deltacticsVisible"
        width="45%"
        @close="closeFn"
      >
        <!-- 表单内容 -->
        <el-form
          ref="departRef"
          :model="departForm"
          :rules="departRules"
          label-width="120px"
        >
          <el-descriptions :column="2">
            <el-descriptions-item label="机器编号">{{ taticMessage.innerCode }}</el-descriptions-item>
            <el-descriptions-item label="策略名称"> {{ taticMessage.policyName }}</el-descriptions-item>
            <el-descriptions-item label="策略方案">{{ taticMessage.discount }}%</el-descriptions-item>
          </el-descriptions>

        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button class="btn2" @click="delPolicyFn">取消策略</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 修改弹出框 -->
    <modifyDevice :visible="regional" :tacticc="rowTactic" @close="close" @submit="addSubmit" />
  </div>
</template>

<script>
import { searchDeviceList, searchDeviceType, serchNodeListApi, delPolicyApi, addDeviceType, poeTactList, getTactList, applyPolicyApi, alterTactApi } from '@/api'
// import { Message } from 'element-ui'
import dayjs from 'dayjs'
import { Message } from 'element-ui'
import modifyDevice from './components/modifyDevice.vue'
import Carousel from './components/Carousel.vue'
export default {
  components: {
    modifyDevice,
    Carousel
  },
  data() {
    return {
      loading: false,
      regional: false,
      centerDialogVisible: false,
      addcenterDialogVisible: false,
      tacticsVisible: false,
      carouselVisible: false, // 添加策略窗口
      deltacticsVisible: false, // 取消策略窗口
      mobel: [], // 型号
      pointt: [], // 点位
      SearchList: [], // 表格
      tactic: [], // 策略
      cccc: [], // 策略存储
      innerCodeList: [], // 存储售货机编号
      multipleSelection: [], // 单选框内容
      id: '', // 存储售货机id
      rowTactic: {}, // 储存售货机信息
      taticMessage: {}, // 策略弹窗信息回显
      currentPage1: 10,
      total: 0,
      // 搜索框
      formInline: {
        taskCode: ''
      },
      // 新增弹窗数据
      departForm: {
        vmType: null,
        nodeId: '',
        createUserId: 1
      },
      // 策略弹窗数据
      type: {
        policyId: ''
      },
      // 表单校验
      departRules: {
        vmType: [
          { required: true, message: '请选择型号', trigger: ['blur'] }
        ],
        nodeId: [
          { required: true, message: '请选择点位', trigger: ['blur'] }
        ]
      },
      // 搜索传入的数值
      pageOption: {
        pageIndex: 1,
        pagesize: 10
      },
      // 新增弹窗搜索传值
      addList: {
        pageIndex: 1,
        pageSize: 100000
      },
      // 售货机状态枚举
      vm: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      }
    }
  },
  computed: {
    title() {
      return this.innerCodeList.length > 1 ? '策略管理' : '批量策略管理'
    }
  },
  async created() {
    this.getDeviceList()
  },
  methods: {
    // 搜索售货机列表
    async getDeviceList() {
      this.loading = true
      const { data } = await searchDeviceList(this.pageOption)
      this.SearchList = data.currentPageRecords
      this.total = +data.totalCount
      this.loading = false
    },
    // 策略请求接口
    async getTact() {
      const { data } = await getTactList()
      this.tactic = data
    },
    // 策略管理提交
    async applyPolicy() {
      await applyPolicyApi({
        innerCodeList: this.innerCodeList,
        policyId: this.type.policyId
      })
      Message.warning('修改成功')
    },

    // 设备编号查询功能
    // 绑定查询事件，在下面声明点击事件
    // 封装数据请求接口、引入、使用
    // 点击查询按钮，将数据传给子组件表格
    // 子组件接收，并进行数据请求实现查询功能
    async onSubmit() {
      console.log('submit!')
      this.loading = true
      // this.pageOption.innerCode = this.formInline.taskCode
      const { data } = await searchDeviceList({ ...this.pageOption, innerCode: this.formInline.taskCode })
      this.SearchList = data.currentPageRecords
      this.total = +data.totalCount
      this.loading = false
    },

    // 新建按钮
    // 声明点击事件
    // 准备新建弹窗dom结构
    // 点击新建展示新建弹窗
    // 调用接口，请求型号和点位数据
    async addClick() {
      this.centerDialogVisible = true
      const { data } = await searchDeviceType(this.addList)
      this.mobel = data.currentPageRecords
      const res = await serchNodeListApi(this.addList)
      this.pointt = res.data.currentPageRecords
    },

    // 新建弹窗提交
    // 注册新建按钮的确定提交事件
    // 对表单进行校验
    // 封装接口，引入接口
    // 在点击确定的时候请求接口，传入数据
    // 对弹窗内的input框进行兜底校验
    // 添加成功，提示用户
    // 关闭弹窗，清空表单
    async submitWork(val) {
      console.log(val)
      this.$refs.departRef.validate(async(vaild) => {
        if (!vaild) return
        await addDeviceType(this.departForm)
        this.centerDialogVisible = false
        Message.success('新增成功')
        this.getDeviceList()
      })
      this.departForm = {
        vmType: '',
        nodeId: ''
      }
    },

    // 单选框发生变化
    handleSelectionChange(val) {
      // 报一点小错误
      this.innerCodeList.push(val[0].innerCode)
    },

    // 批量操作
    bulkFn() {
      if (this.innerCodeList.length === 0) return Message.warning('请勾选售货机')
      this.tacticsVisible = true
      this.getTact()
    },
    // 批量提交
    bulkWork() {
      if (this.type.policyId === '') return Message.error('策略不存在')
      this.policyId = this.type.policyId
      this.applyPolicy()
    },

    // 点击策略
    // 展示查看详情的弹窗组件
    // 传入当前行的id
    // 请求应用策略数据
    // 如果有数据，显示取消策略窗口
    // 弹窗展示策略信息，并可以进行取消操作
    // 如果没数据，显示添加策略窗口
    // 存入售货机编号提交时使用
    async tactics(val) {
      const res = await poeTactList(val.innerCode)
      console.log(res.data)
      this.taticMessage = res.data
      if (res.data === '') {
        this.tacticsVisible = true
        this.innerCodeList.push(val.innerCode)
        this.getTact(val)
      } else {
        this.deltacticsVisible = true
      }
    },

    // 点击取消策略
    async delPolicyFn() {
      await delPolicyApi({
        innerCode: this.taticMessage.innerCode,
        policyId: this.taticMessage.policyId
      })
      Message.success('策略取消成功')
      this.deltacticsVisible = false
      this.getDeviceList()
    },

    // 点击取消关闭弹窗、清除表单
    closeFn() {
      this.centerDialogVisible = false
      this.tacticsVisible = false
      this.deltacticsVisible = false
      this.addcenterDialogVisible = false
      this.type = {
        vmTactic: ''
      }
      this.departForm = {
        vmType: null,
        nodeId: ''
      }
    },
    close() {
      this.regional = false
    },

    // 货道弹窗
    // 准备弹窗的dom结构
    // 绑定货道按钮事件
    // 声明事件
    // 封装数据请求接口、引入
    // 点击货道按钮打开弹窗
    // 请求数据，实现弹窗数据显示
    async cargo(val) {
      this.carouselVisible = true
      console.log(val)
    },

    // 策略弹窗确定按钮
    // 请求策略接口
    // 发送售货机编号innerCodeList
    // 选择的策略id
    // 提示用户、关闭弹窗
    async tacticSubmit() {
      if (this.type.policyId === '') return Message.error('策略不存在')
      this.applyPolicy()
      this.tacticsVisible = false
    },

    // 点击修改
    // 打开修改设备弹窗
    altertac(val) {
      this.regional = true
      this.rowTactic = val
      this.id = val.id
    },

    // 设备修改
    // 封装设备修改接口，引入
    // 在设备修改子组件点击确定弹窗
    // 通知父组件调用设备修改接口
    // 子组件传入点位id
    // 父组件接收使用
    async addSubmit(nodeId) {
      console.log(nodeId)
      await alterTactApi({
        id: this.id,
        nodeId: nodeId
      })
    },

    // 格式化时间
    formatDate(value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },

    // 实现分页
    handleCurrentChange(val) {
      this.loading = true
      console.log(val)
      this.pageOption.pageIndex = val
      this.getDeviceList()
      this.loading = false
    }
  }
}
</script>

<style lang="scss">
#add {
  overflow: hidden;
  background-color: #f8fafd;
}
.navebar {
  margin: 20px 19px 0;
  padding-top: 14px;
  padding-left: 18px;
  height: 64px;
  background-color: #fff;
}
// 表格
.boxs {
  margin: 20px 19px 0;
  padding: 17px 0 1px 18px;
  background-color: #fff;
}
// 按钮
.btn1 {
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: #f8fafd;
  height: 35px;
}
.btn2 {
  background-color: #fbf4f0;
  border: #f8fafd;
  color: #f97138;
  height: 35px;
}
// 表格高度
.el-table .el-table__cell {
    padding: 3px 0 0 0;
}
// 内容
.el-descriptions {
  padding: 0px 0px 0px 30px;
}
.dil .el-dialog__footer {
  margin-top: -38px;
  padding: 15px 210px;
}
.dils .el-dialog__footer {
  margin-top: -8px;
  padding: 10px 248px 20px;
}
.dils .el-dialog__body {
    padding: 30px 46px
}
.dils .el-descriptions-item__label .has-colon {
  margin-right: 19px;
}
.dialog-footer {
  margin-top: 10px;
}
.btnquxiao {
  margin-right: 20px;
  height: 37px;
}
.button {
  background-color: #fbf4f0;
  border: #f8fafd;
  color: #f97138;
}
// 分页器
.block {
  margin: 20px 0;
}
.tabel {
  margin-top: 19px;
}
.btn-prev {
  margin-left: 100px;
}
// 新增设备弹窗
.box1 {
  margin-left: 56px;
  margin-top: -5px;
  font-size: 15px;
}
.box1 span {
  margin-right: 25px;
}
.box2 {
  display: flex;
  margin-top: 30px;
}
.box2 .span {
  margin-top: -14px;
}
.dil .el-form-item{
  margin-bottom: 16px
}
.el-dialog__title {
  line-height: 22px;
  font-size: 17px;
  font-weight: 600;
  color: #333;
}
</style>
